<template>
  <el-card shadow="never" class="el-card">
    <template #header>
      <h4>文章搜索</h4>
      <el-input  v-model="input"  class="el-input">
        <template #suffix>
          <i  :class="[!loading ? 'iconfont icon-sousuo' : 'iconfont icon-jiazai1 tra']"></i>
        </template>
      </el-input>
      <div  v-if="input!==''">
        <el-divider/>
        <ShowResult @closeInputContent="clearContent" :article-list="searchResult"/>
      </div>
    </template>
    <h4 style="text-align: left;color: chocolate">{{articleType==='NEWS' ? '最新新闻' :'最新公告'}}</h4><br>
    <el-row v-for="article in latestArticles" :key="article.articleId" justify="space-between">
      <router-link class="RLink"  :to="'/showArticle/'+article.articleId">
        {{ article.articleTitle.substring(0,10) }}...
      </router-link>
      {{article.publishTime}}
    </el-row>
  </el-card>
</template>

<script>
import {getArticleByPage, getArticleByTitle} from "@/api/multimedia";
import ShowResult from "@/views/article/showArticle/showResult";
export default {
  name: "search",
  components: {ShowResult},
  props:['articleType'],
  data(){
    return{
      input:'',
      timeout:'',
      searchResult:'',
      latestArticles:[],
      loading:false
    }
  },
  watch:{
    input(newVal){

      clearTimeout(this.timeout)
      if( newVal!==''){
        this.timeout=setTimeout(()=>{
          this.searchArticleList()
        },2000)
      }
      else {
        this.searchResult=''
      }
    },
    //监视$route.params.articleId
    articleType:{
     handler(newVal){
       this.getLastArticle()
     },
      immediate:true
    }
  },
  created() {

  },
  computed:{
  },
  methods:{
    searchArticleList(){
      this.loading=true
      if (this.articleType==='NEWS'){
        getArticleByTitle(this.input,1).then(res=>{
          this.searchResult=res.data.articleList
          if (this.searchResult===''){
            this.$notify({
              type:'error',
              message:'未查到相关文章'
            })
          }
          this.loading=false
        })
      }
      else {
        getArticleByTitle(this.input,0).then(res=>{
          this.searchResult=res.data.articleList
          if (this.searchResult===''){
            this.$notify({
              type:'error',
              message:'未查到相关文章'
            })
          }
          this.loading=false
        })
      }
    },
    //子组件showResult通过$emit调用清空input框，从而让showResult消失
    clearContent(){
      this.input=''
    },
    getLastArticle(){
      if (this.articleType==='NEWS'){
        getArticleByPage(0,10,1).then(response=>{
          this.latestArticles=response.data.news
        })
      }
      else {
        getArticleByPage(0,10,0).then(response=>{
          this.latestArticles=response.data.news

        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.tra{
  animation: rotate 6s linear infinite;
}
.el-input{
  width: 250px;
}
.RLink{
  text-decoration: none;
  color: #000000;
&:hover{
   color: #666;
 }
}
</style>
